<template>
  <div class="container-graphic base-container">
    <svg class="graphic" viewBox="100 100 2040 2400">
      <g class="container">
        <polygon
          class="graphic-area"
          :points="
            graphicData.area.map((point) => `${point.x},${point.y}`).join(' ')
          "
        />
        <polyline
          v-if="rightPath.length > 1"
          class="graphic-path"
          :points="rightPath.map((point) => `${point.x},${point.y}`).join(' ')"
        />
        <polyline
          v-if="wrongPaths.length > 1"
          class="graphic-path graphic-path-wrong"
          :points="wrongPaths.map((point) => `${point.x},${point.y}`).join(' ')"
        />
        <g id="points">
          <circle
            class="graphic-point"
            v-for="(value, key, index) in rightPoints"
            :cx="value.x"
            :cy="value.y"
            r="15"
          />
          <circle
            class="graphic-point graphic-point-wrong"
            v-for="(value, key, index) in wrongPoints"
            :cx="value.x"
            :cy="value.y"
            r="15"
          />
          <text
            class="graphic-label"
            v-for="(value, key, index) in rightPoints"
            :transform="`translate(${value.x + 15},${value.y + 50})`"
          >
            {{ key }}
          </text>
          <text
            class="graphic-label graphic-label-wrong"
            v-for="(value, key, index) in wrongPoints"
            :transform="`translate(${value.x + 15},${value.y + 50})`"
          >
            {{ key }}
          </text>
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import graphicData from "./graphicData.json";

const props = defineProps({
  route: {
    type: Array,
    required: false,
    default: [],
  },
  selected: {
    type: Array,
    required: false,
    default: [],
  },
});

const rightPath = computed(() => {
  const points = [];
  if (
    props.route.length > 1 &&
    props.selected.length > 1 &&
    props.route.length >= props.selected.length
  ) {
    props.selected.forEach((value, index, array) => {
      if (props.route[index] == value) {
        points.push(graphicData.points[value]);
      }
    });
  }
  return points;
});

const wrongPaths = computed(() => {
  const points = [];
  if (
    props.route.length > 1 &&
    props.selected.length > 1 &&
    props.route.length >= props.selected.length
  ) {
    props.selected.forEach((value, index, array) => {
      if (props.route[index] != value) {
        points.push(graphicData.points[array[index - 1]]);
        points.push(graphicData.points[value]);
      }
    });
  }
  return points;
});

const rightPoints = computed(() => {
  const points = {};
  if (
    props.route.length > 0 &&
    props.selected.length > 0 &&
    props.route.length >= props.selected.length
  ) {
    props.selected.forEach((value, index, array) => {
      if (props.route[index] == value) {
        points[value] = graphicData.points[value];
      }
    });
  }
  return points;
});

const wrongPoints = computed(() => {
  const points = {};
  if (
    props.route.length > 0 &&
    props.selected.length > 0 &&
    props.route.length >= props.selected.length
  ) {
    props.selected.forEach((value, index, array) => {
      if (props.route[index] != value) {
        points[value] = graphicData.points[value];
      }
    });
  }
  return points;
});
</script>

<style scoped>
@import "./container.css";

.container-graphic {
  border: 1px solid var(--el-color-info-light-3);
  overflow: hidden;
  margin: 10px;
  padding: 0;
}

.graphic {
  width: 100%;
  height: 100%;
}

.graphic-area {
  fill: var(--el-color-info-light-7);
  stroke: var(--el-color-info-light-3);
  stroke-width: 10;
}

.graphic-point {
  fill: var(--el-color-primary);
}

.graphic-point-wrong {
  fill: var(--el-color-danger);
}

.graphic-label {
  fill: var(--el-color-primary);
  font-size: 48px;
  font-weight: bold;
  /* font-family: Arial, Helvetica, sans-serif; */
}

.graphic-label-wrong {
  fill: var(--el-color-danger);
}

.graphic-path {
  fill: none;
  stroke: var(--el-color-primary);
  stroke-width: 10;
}

.graphic-path {
  fill: none;
  stroke: var(--el-color-primary);
  stroke-width: 10;
}

.graphic-path-wrong {
  stroke: var(--el-color-danger);
}
</style>
